<template>
  <a-tabs v-model:activeKey="bidType" type="card" class="bid-tabs">
    <a-tab-pane key="NORMAL_BID" tab="正常出价">
      <a-form-item-rest>
        <div class="bid-input-container">
          <a-input-number
            v-model:value="bidValue"
            :min="minBidValue"
            :max="maxBidValue"
            :precision="precisionValue"
            style="width: 200px"
            addon-after="元"
          />
        </div>
        <div class="bid-tip">出价上限：{{ maxBidValue }}元</div>
      </a-form-item-rest>
    </a-tab-pane>

    <a-tab-pane v-if="showRandomBid" key="RANDOM_BID" tab="随机出价">
      <a-form-item-rest>
        <div class="bid-input-container">
          <a-input-number
            v-model:value="rangeMin"
            :min="minBidValue"
            :max="maxBidValue"
            :precision="precisionValue"
            style="width: 120px"
          />
          <span class="range-separator">-</span>
          <a-input-number
            v-model:value="rangeMax"
            :min="rangeMin || minBidValue"
            :max="maxBidValue"
            :precision="precisionValue"
            style="width: 120px"
          />
          <span class="addon-text">元</span>
        </div>
        <div class="bid-tip">出价上限：{{ maxBidValue }}元 出价将在该范围内随机生成</div>
      </a-form-item-rest>
    </a-tab-pane>

    <a-tab-pane v-if="showGradientBid" key="GRADIENT_BID" tab="梯度出价">
      <a-form-item-rest>
        <div class="bid-input-container">
          <a-input-number
            v-model:value="rangeMin"
            :min="minBidValue"
            :max="maxBidValue"
            :precision="precisionValue"
            style="width: 120px"
          />
          <span class="range-separator">-</span>
          <a-input-number
            v-model:value="rangeMax"
            :min="rangeMin || minBidValue"
            :max="maxBidValue"
            :precision="precisionValue"
            style="width: 120px"
          />
          <span class="addon-text">元</span>
        </div>
        <div class="bid-tip">出价上限：{{ maxBidValue }}元 根据创建的广告数量阶梯设置出价</div>
      </a-form-item-rest>
    </a-tab-pane>
  </a-tabs>
</template>

<script setup lang="ts">
import { ref, watch, onMounted, computed } from "vue";

// 定义组件接收的属性
const props = defineProps({
  modelValue: {
    type: Object,
    default: () => ({
      type: "NORMAL_BID",
      value: 1,
    }),
  },
  minBid: {
    type: Number,
    default: 1,
  },
  maxBid: {
    type: Number,
    default: 1,
  },
  precision: {
    type: Number,
    default: 2,
  },
  showRandomBid: {
    type: Boolean,
    default: true,
  },
  showGradientBid: {
    type: Boolean,
    default: true,
  },
});

// 计算属性，提供给模板使用
const minBidValue = computed(() => props.minBid);
const maxBidValue = computed(() => props.maxBid);
const precisionValue = computed(() => props.precision);

// 定义组件发出的事件
const emit = defineEmits(["update:modelValue"]);

// 内部状态
const bidType = ref("NORMAL_BID");
const bidValue = ref(props.minBid);
const rangeMin = ref(props.minBid);
const rangeMax = ref(props.minBid);

// 初始化组件状态
onMounted(() => {
  if (props.modelValue) {
    bidType.value = props.modelValue.type || "NORMAL_BID";

    if (bidType.value === "NORMAL_BID") {
      bidValue.value = props.modelValue.value || 1;
    } else if (props.modelValue.value && typeof props.modelValue.value === "object") {
      rangeMin.value = props.modelValue.value.min || props.minBid;
      rangeMax.value = props.modelValue.value.max || 1;
    }
  }

  // 初始化完成后发送一次更新，确保父组件有值
  updateModelValue();
});

// 监听出价类型变化
watch(bidType, () => {
  updateModelValue();
});

// 监听正常出价值变化
watch(bidValue, () => {
  if (bidType.value === "NORMAL_BID") {
    updateModelValue();
  }
});

// 监听出价范围变化
watch([rangeMin, rangeMax], () => {
  if (bidType.value === "RANDOM_BID" || bidType.value === "GRADIENT_BID") {
    updateModelValue();
  }
});

// 更新并向父组件发送数据
const updateModelValue = () => {
  let value;

  if (bidType.value === "NORMAL_BID") {
    value = {
      type: bidType.value,
      value: bidValue.value,
    };
  } else {
    value = {
      type: bidType.value,
      value: {
        min: rangeMin.value,
        max: rangeMax.value,
      },
    };
  }

  emit("update:modelValue", value);
};
</script>

<style scoped lang="less">
.bid-tabs {
  width: 100%;
}

.bid-input-container {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.range-separator {
  margin: 0 8px;
  color: #999;
}

.addon-text {
  margin-left: 8px;
  color: #999;
}

.bid-tip {
  color: #999;
  font-size: 12px;
}
</style>
